<template>
  <div class="comparison">
    <!-- 如果存在图标则显示 -->
    <img v-if="displayData.icon" :src="displayData.icon" alt="icon" class="icon"/>
    <span :style="{ color: displayData.color }">
      {{ displayData.text }}
    </span>
  </div>
</template>

<script>
export default {
  name: 'DataComparison',
  props: {
    first: {
      type: Number,
      required: true
    },
    second: {
      type: Number,
      required: true
    },
    third: {
      type: Number,
      required: true
    }
  },
  computed: {
    displayData() {
      if (this.first > this.second) {
        return {
          color: '#BCA555',
          icon: require('@/assets/img/icon/up.png'),
          text: this.third + '%'
        }
      } else if (this.first < this.second) {
        return {
          color: '#4FB31C',
          icon: require('@/assets/img/icon/down.png'),
          text: this.third + '%'
        }
      } else {
        return {
          color: '#16B3E0',
          icon: null,
          text: '持平'
        }
      }
    }
  }
}
</script>

<style scoped>
.comparison {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 10px;
  height: 12px;
  margin-right: 2px;
}
</style>
